<template>
  <div class="edit-box">
    <table>

      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>颜色</th>
        </tr>
      </thead>
      <draggable tag="tbody" v-model="list">
          <tr v-for="d in list" :key="d.id">
            <td>{{ d.id }}</td>
            <td @dblclick="edit(d.id,'name')">
              <!-- id和字段名都相等时就触发 -->
              <input type="text" :value="d.name" v-if="d.id === activeItem.id && activeItem.field === 'name'" @blur="save">
              <span v-else>{{ d.name }}</span>
            </td>
            <td @dblclick="edit(d.id,'color')">
              <input type="text" :value="d.color" v-if="d.id === activeItem.id && activeItem.field === 'color'" @blur="save">
              <span v-else>{{ d.color }}</span></td>
          </tr>

      </draggable>
    </table>
  </div>
</template>
<script>
import Draggable from "vuedraggable";
export default {
  components: { Draggable },
  data(){
    return{
      // 双击要进行编辑那条数据的id和字段
      activeItem:{
        id:'',
        field:''
      }
    }
  },
  //计算属性的对象写法，支持get和set
  computed: {
    list: {
      // 读取计算属性的时候调用
      get() {
        return this.$store.state.statusList;
      },
      // 如果给这个计算属性赋值。就会执行/调用set，赋的值会作为set的参数
      set(list) {
        // console.log(list);
        this.setOrder(list);
      },
    },
  },
  methods: {
    // 排序
    setOrder(list) {
      this.$store.commit("setStatusList", list);
      this.axios
      .post("/status-order", {
        type: "pre",
        ids: list.map((i) => i.id),
      })
      .then((data) => {
        if (!data.code) {
          this.$notify({
            title: "排序保存成功",
            type: "success",
          });
        }
      });
    },
    // 双击修改
    edit(id,field){
      this.activeItem={
        id,field
      }
    },
    //失焦
    //this.$store.state.statusList.map(i=>({
      //...i
      // [field]:i.id===id? val : i[field]
    // }))


    save(event){
      // 先调用接口把后台的代码修改了 然后通过vuex将当前页面修改
      //先拿到输入框得值 找到哪一行 把值传过去
      const val = event.target.value
      const {id,field} = this.activeItem
      // 找当前编辑的那行数据
      const row = this.$store.state.statusList.find(i=>i.id===id)
      //对象的属性名可以使用变量，只要变量加方括号
      this.$axios.post('/status-edit',{
        type:"pre",
        //如果field是name就是name如果是color就是color
        ...row,
        [field] : val,
      }).then(data=>{
        if(!data.code){
          this.$notify({
            title: "编辑成功",
            type: "success",
          });
          //就数组的id对上的那一条的field字段修改了
          this.$store.commit('setStatusList')
        }
      })
      this.activeItem = {
        id:'',
        field:'',

      }
    },
  },
};
</script>
<style lang="sass" scoped>
.edit-box
  table
    border-collapse: callapse
    width: 100%
    line-height: center
    thead,tbody
      width: 100%
      tr
        td,th
          width: 33%
          text-align: center
          line-height: 50px
        &:hover
          background: #ccc
          td
            transition: .3s
          input
            height: 30px
            padding: 0 5px
            border: 1px solid #ccc
            border-radius: 4px
            outline: none
</style>
